<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="login-container">
    <div class="login-box">
      <div class="login-header">
        <h2>登录账号</h2>
        <p>欢迎回来，请登录您的账号</p>
      </div>
      
      <!-- 替换Element Plus表单为原生表单 -->
      <form class="login-form" @submit.prevent="handleLogin">
        <div class="form-item">
          <label>用户名</label>
          <input 
            v-model="loginForm.username" 
            placeholder="请输入用户名或邮箱"
            required
          />
        </div>
        
        <div class="form-item">
          <label>密码</label>
          <input 
            v-model="loginForm.password" 
            type="password" 
            placeholder="请输入密码"
            required
            minlength="6"
          />
        </div>
        
        <div class="remember-forgot">
        </div>
        
        <button 
          type="submit" 
          class="login-button" 
          :disabled="loading"
        >
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </form>
      
      <div class="register-link">
        还没有账号? <router-link to="/register">立即注册</router-link>
        <el-button type="primary" @click="passwordBack" style="margin-left: 15px;">重置密码</el-button>
      </div>
    </div>
  </div>

  <!-- 密码重置对话框 -->
  <div v-if="showResetModal" class="modal-overlay">
    <div class="modal-content">
      <h3>重置密码</h3>
      <p>请输入您的用户名，我们将为您重置密码</p>
      
      <form @submit.prevent="handleResetPassword">
        <div class="form-item">
          <label>用户名</label>
          <input 
            v-model="resetUsername"
            placeholder="请输入用户名"
            required
          />
        </div>
        <div class="form-item">
          <label>手机号</label>
          <input 
            v-model="phone"
            placeholder="请输入手机号"
            required
          />
        </div>
        
        <div class="modal-buttons">
          <button 
            type="button" 
            class="cancel-button"
            @click="closeResetModal"
          >
            取消
          </button>
          <button 
            type="submit" 
            class="confirm-button"
            :disabled="resetLoading"
          >
            {{ resetLoading ? '提交中...' : '确认重置' }}
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { eventBus, updateAuthState } from '@/utils/eventBus'
// 移除不需要的导入
// import { ElMessage } from 'element-plus'
// import { userApi } from '../api'

// 路由
const router = useRouter()

// 登录表单数据
const loginForm = reactive({
  username: '',
  password: '',
})

// 加载状态
const loading = ref(false)

// 密码重置相关
const showResetModal = ref(false)
const resetUsername = ref('')
const resetLoading = ref(false)
const phone = ref('')
// 打开密码重置对话框
const passwordBack = () => {
  showResetModal.value = true
  resetUsername.value = '',
  phone.value = ''
}

// 提交密码重置
const handleResetPassword = async () => {
  if (!resetUsername.value) {
    alert('请输入用户名和手机号')
    return
  }
  
  resetLoading.value = true
  
  try {
    // 调用重置密码API
    const res = await request.put('/user/reset', {
      username: resetUsername.value,
      phone: phone.value
    })
    
    if (res.data.code === '200') {
      alert('密码重置成功，新密码为：123456')
      showResetModal.value = false
    } else {
      alert(res.data.message || '密码重置失败，请检查用户名是否正确')
    }
  } catch (error) {
    if (error.response) {
      alert(error.response.data.message || '密码重置失败')
    } else {
      alert('密码重置失败，请检查网络连接')
      console.error('重置密码错误:', error)
    }
  } finally {
    resetLoading.value = false
  }
}

// 关闭重置密码对话框
const closeResetModal = () => {
  showResetModal.value = false
}

// 登录处理
const handleLogin = async () => {
  if (!loginForm.username || !loginForm.password) {
    alert('请填写用户名和密码');
    return;
  }
  
  loading.value = true
  
  try {
    // 调用登录API
    const res = await request.post('/user/login', {
      username: loginForm.username,
      password: loginForm.password
    });

    
    if (res.data.code === '200') {
      // 保存登录状态
      console.log();
      
      localStorage.setItem('token', res.data.data.token);
      localStorage.setItem('user', JSON.stringify(res.data.data));
      
      // 更新全局登录状态
      updateAuthState();
      
      // 触发登录成功事件
      eventBus.emit('login-success', res.data.user);
      
      // 登录成功消息
      alert('登录成功');
      loading.value = false;
      
      // 重定向到首页
      router.push('/');
    } else {
      alert(res.data.message || '登录失败，请检查用户名和密码');
    }

  } catch (error) {
    // 如果是API错误响应
    if (error.response) {
      alert(error.response.data.message || '登录失败，请检查用户名和密码');
    } else {
      // 如果是其他错误（如网络问题）
      alert('登录失败，请检查网络连接');
      console.error('登录错误:', error);
      
    }
  } finally {
    loading.value = false;
  }
}

</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
  padding: 2rem;
}

.login-box {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.login-header {
  text-align: center;
  margin-bottom: 2rem;
}

.login-header h2 {
  font-size: 1.8rem;
  color: #333;
  margin-bottom: 0.5rem;
}

.login-header p {
  color: #666;
}

.login-form {
  margin-bottom: 1.5rem;
}

.form-item {
  margin-bottom: 1.5rem;
}

.form-item label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #333;
}

.form-item input {
  width: 100%;
  height: 40px;
  padding: 0 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  transition: border-color 0.2s;
  font-size: 14px;
  box-sizing: border-box;
}

.form-item input:focus {
  border-color: #409eff;
  outline: none;
}

.login-button {
  width: 100%;
  margin-top: 1rem;
  height: 45px;
  background-color: #409eff;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-button:hover {
  background-color: #66b1ff;
}

.login-button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.forgot-link {
  color: #409eff;
  text-decoration: none;
}

.register-link {
  margin-top: 1.5rem;
  text-align: center;
  color: #666;
}

.register-link a {
  color: #409eff;
  text-decoration: none;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: #fff;
  border-radius: 8px;
  padding: 2rem;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-content h3 {
  margin-top: 0;
  font-size: 1.5rem;
  color: #333;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 1.5rem;
}

.cancel-button {
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-button {
  padding: 8px 16px;
  background-color: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.confirm-button:disabled {
  background-color: #a0cfff;
  cursor: not-allowed;
}
</style> 